<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<div class="pie">
		
	</div>
	<script src="lib/d3.v3.js"></script>
	<script>
		var width = 350;
		var height = 510
		var svg = d3.select(".pie").append('svg').attr({"width":width,"height":height});
		var max = 40
		var dataset = [[[10,30],[10,30]]];
		var pie = d3.layout.pie()
		var color = d3.scale.category20();
		//弧生成器
		var radius = width / 8;
		
		var outArc = d3.svg.arc()
					.innerRadius(radius - 4)
					.outerRadius(radius);
		
		var inArc = d3.svg.arc()
					.innerRadius(radius - 12)
					.outerRadius(radius - 8);
		
		var color = d3.scale.category20();
		
		var group = svg.selectAll("g")
				.data(dataset)
				.enter()
				.append("g")
				.attr("transform",function(d,i) {
					//先判断是第一列，还是第二列
					if(i % 2 == 0) { //第一列
						return "translate(" + radius + "," + ((Math.ceil((i + 1) / 2) * 2) - 1) * radius +")"
					} else { //第二列
						return "translate(" + 5 * radius + "," + ((Math.ceil((i + 1) / 2) * 2) - 1) * radius +")"
					}
				})
		//添加外圆弧		
		group.append("path")
			.attr("fill",color(8))
			.attr("d",function(d,i) {
				return outArc(pie(d[0])[0])
			})
		//添加内圆弧					
		group.append("path")
			.attr("fill",color(10))
			.attr("d",function(d,i) {
				return inArc(pie(d[1])[0])
			})
		//添加实心内圆
		group.append("circle")
			.attr("r",radius - 12)
			.attr("fill","#13127b")
		
					
					
		
					
	</script>
</body>
</html>